<template>
  <div class="op-dialog">
    <el-dialog v-model="visible" :title="title" width="800">
      <template #default>
        <el-form ref="formRef" label-width="100" :model="model" :rules="rules">
          <el-form-item label="节点类型" prop="type">
            <el-radio-group v-model="model.type">
              <el-radio :label="0">目录</el-radio>
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">权限</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="节点名称" prop="name">
            <el-input v-model="model.name" placeholder="请填写节点名称" />
          </el-form-item>

          <el-form-item label="上级节点" prop="parentId">
            <el-tree-select
              v-model="model.parentId"
              :data="treeData"
              :props="{ label: 'name' }"
              :render-after-expand="false"
              value-key="id"
              placeholder="请填写节点名称"
              check-strictly
              clearable
            />
          </el-form-item>

          <el-form-item
            label="节点路由"
            prop="router"
            v-show="model.type === 1"
          >
            <el-input
              v-model="model.router"
              placeholder="请填写节点路由，如: /test"
            />
          </el-form-item>

          <el-form-item
            label="路由缓存"
            prop="keepAlive"
            v-show="model.type === 1"
          >
            <el-switch
              v-model="model.keepAlive"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>

          <el-form-item
            label="是否显示"
            prop="isShow"
            v-show="model.type !== 2"
          >
            <el-switch
              v-model="model.isShow"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>

          <el-form-item
            label="文件路径"
            prop="viewPath"
            v-show="model.type === 1"
          >
            <el-input v-model="model.viewPath" />
          </el-form-item>

          <el-form-item label="节点图标" prop="icon">
            <IconSelect v-model="model.icon" />
          </el-form-item>

          <el-form-item label="排序号" prop="orderNum">
            <el-input v-model="model.orderNum" readonly />
          </el-form-item>
        </el-form>
      </template>

      <template #footer>
        <el-space>
          <el-button type="default" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </el-space>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuListAll, addMenu, updateMenu } from "@/api/system";
import { deepTree } from "@/utils/common";
import IconSelect from "@/components/icon-select/index.vue";

export default {
  name: "OpDialog",

  components: {
    IconSelect,
  },

  emits: ["success"],

  data() {
    return {
      visible: false,
      title: "新增",

      treeData: [], // 上级节点 el-tree-select 数据

      id: null, // 当前操作的数据Id
      // 表单数据
      model: {
        type: 0, // 节点类型: 0 - 目录 1 - 菜单 2 - 权限
        name: "", // 节点名称
        parentId: null, // 父节点Id
        router: "", // 节点路由
        keepAlive: 1, // 路由缓存
        isShow: 1, // 是否显示
        viewPath: null, // 文件路径
        icon: null, // 节点图标
        orderNum: 0, // 节点排序
        perms: "", // 权限标识
      },
      // 表单校验规则
      rules: {
        type: [{ required: true, message: "节点类型不能为空" }],
        name: [{ required: true, message: "节点名称不能为空" }],
      },
    };
  },

  methods: {
    // 获取上级节点数据
    async getTreeData() {
      const result = await getMenuListAll();
      const tmp = result.filter((item) => item.type !== 2);
      this.treeData = deepTree(tmp);
    },
    // open
    open(row) {
      console.log("row", row);
      if (row) {
        // 编辑
        this.id = row.id;
        this.title = "编辑";
        this.visible = true;

        // 数据回填
        //      1. 获取 modelKeys
        const modelKeys = Object.keys(this.model);
        const obj = {};
        //      2. 根据 modelKeys 赋值 obj
        modelKeys.forEach((key) => {
          obj[key] = row[key];
        });
        //      3. 将 obj 的数据合并到 this.model
        this.$nextTick(() => {
          this.model = Object.assign({}, this.model, obj);
        });
      } else {
        // 新增
        this.id = null;
        this.title = "新增";
        this.visible = true;

        // 数据重置
        try {
          this.$refs.formRef?.resetFields();
        } catch (error) {
          console.log("error", error);
        }

        console.log("===this.model", this.model);
      }
    },

    // 取消
    handleCancel() {
      this.visible = false;
    },

    // 确认
    handleConfirm() {
      this.$refs.formRef.validate(async (flag) => {
        if (!flag) return;

        if (this.id) {
          // 编辑
          await updateMenu({
            ...this.model,
            id: this.id,
            parentId: this.model.parentId || null,
            keepAlive: !!this.model.keepAlive,
            isShow: !!this.model.isShow,
          });
        } else {
          // 新增
          await addMenu({
            ...this.model,
            // PS: 后端接口需要该节点没有时，设置为 null
            parentId: this.model.parentId || null,
            keepAlive: !!this.model.keepAlive,
            isShow: !!this.model.isShow,
          });
        }

        this.visible = false;

        this.$emit("success");
      });
    },
  },

  created() {
    this.getTreeData();
  },
};
</script>
